<!DOCTYPE html>
<html style="height: 100%;width: 100%">
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <link rel="stylesheet" href="../../static/layui/dist/css/layui.css">
    <style>
        .ad{
            display: inline-block;
            vertical-align: middle;
            text-align: center;
            color: #666;
            margin-top: 10px;
            margin-left: 20px;
        }
        .ma{
            margin-top: 10px;
        }
        .ul{
            height: calc(100% - 60px);
            border: 1px solid #e6e6e6;
            overflow: auto
        }
        .mbuttn{
            margin-left: 20px;
        }
    </style>
</head>
<body style="height: 100%;width: 100%">
<div style="width: 100%;height: 100%;">
    {% csrf_token %}
    <ul class="layui-border-box site-doc-icon site-doc-anim ul">
        {{data | safe }}
    </ul>
    {{menu_str | safe}}
</div>
</div>
</body>
</html>
<script src="../../static/layui/layui.js" charset="utf-8"></script>
<script src="/static/js/jquery-3.3.1.min.js" charset="utf-8"></script>
<script src="/static/js/jquery.cookie.js" charset="utf-8"></script>
<script>
    layui.use(['form','element','upload','layer'], function() {
        var form = layui.form
            ,$ = layui.jquery
            ,upload = layui.upload
            ,element = layui.element
            ,layer = layui.layer;
        var re_url = "{{url_data|safe}}";

        form.on('submit(detail)', function(data){
            layer.open({
                type: 2 //Page层类型
                ,area: ['100%', '100%']
                ,title: '壁纸预览'
                ,shade: 0.6 //遮罩透明度
                ,anim: 4 //0-6的动画形式，-1不开启
                ,content:['theme_detail.html/'] + "?image_id=" + data.elem.id + "&type=" + re_url
            });
        });

        form.on('submit(adminInfo)', function(data){
            var index = layer.load(2, {shade: [0.2, '#5B5B5B']});

            $.ajax({
                url: 'theme_use.html',
                type: 'POST',
                data:{'key': 'theme_edit','base':data.elem.id,'type':re_url},
                headers:{'X-CSRFtoken':$.cookie('csrftoken')},
                success: function (base) {
                    if (base == 'true'){
                        layer.msg('操作成功！', {icon: 1});
                        //下面为跳出iframe框架的页面跳转
                        setTimeout("window.location.reload();", 1000 )
                    }else {
                        layer.close(index);
                        layer.msg('操作失败，请联系系统管理员！', {icon: 2,time:1000});
                    }
                }
            })
            return false;
        });

        form.on('submit(delete)', function(data){
            layer.confirm('你确定要删除当前数据？', {
                btn: ['确定','取消'] //按钮
            }, function() {
                var index = layer.load(2, {shade: [0.2, '#5B5B5B']});

                $.ajax({
                    url: 'theme_delete.html',
                    type: 'POST',
                    data: {'key': 'theme_delete', 'base': data.elem.id,'type':re_url},
                    headers: {'X-CSRFtoken': $.cookie('csrftoken')},
                    success: function (base) {
                        if (base == 'true') {
                            layer.msg('操作成功！', {icon: 1});
                            //下面为跳出iframe框架的页面跳转
                            setTimeout("window.location.reload();", 1000)
                        } else {
                            layer.close(index);
                            layer.msg('操作失败，请联系系统管理员！', {icon: 2,time:1000});
                        }
                    }
                })
                return false;
            })
        });

        form.on('submit(refresh)', function(data){
            var index = layer.load(2, {shade: [0.2, '#5B5B5B']});

            $.ajax({
                url: 'theme.html',
                type: 'GET',
                // data:{'key': 'theme','base':data.elem.id,'type':re_url},
                headers:{'X-CSRFtoken':$.cookie('csrftoken')},
                success: function (base) {
                    layer.msg('刷新成功！', {icon: 1});
                    setTimeout("window.location.reload();", 1000 )
                }
            })
            return false;
        });

        var uploadInst = upload.render({
            elem: '#theme_image'
            ,url: '/theme_upload' //改成您自己的上传接口
            ,size: 1024*5 //限制文件大小，单位 KB
            ,extz:'jpg|png|jpeg'
            ,headers:{'X-CSRFtoken':$.cookie('csrftoken')}
            ,before: function(obj){
                this.data = {
                    id: "{{id}}",
                    type:re_url,
                }
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#image_link').attr('src', result); //图片链接（base64）
                });

                element.progress('progress', '0%'); //进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            }
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                //上传成功的一些操作
                $('#progress_bar').html(''); //置空上传失败的状态
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#progress_bar');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs progress-reload">重试</a>');
                demoText.find('.progress-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
            //进度条
            ,progress: function(n, elem,e){
                element.progress('progress', n + '%'); //可配合 layui 进度条元素使用
                if(n == 100){
                    layer.msg('上传完毕', {icon: 1});
                    setTimeout("window.location.reload();", 1000)
                }
            }
        });
        $(".layui-upload-img").click(function () {
            var data = $(this).attr("id")
            layer.open({
                type: 2 //Page层类型
                ,area: ['100%', '100%']
                ,title: '壁纸预览'
                ,shade: 0.6 //遮罩透明度
                ,anim: 4 //0-6的动画形式，-1不开启
                ,content:['theme_detail.html/'] + "?image_id=" + data + "&type=" + re_url
            });
        })
    });
</script>
